<template>
  <div>
    <ul class="article" v-if="userBrowsingHistory.length > 0">
      <li
        v-for="(item, article_id) in userBrowsingHistory"
        :key="article_id"
        @click="details(item.article_id)"
        class="browsing-history"
      >
        <!-- 文章标题 -->
        <div class="title">{{ item.article_title }}</div>
        <div class="browsing-time">浏览时间 {{ item.view_time }}</div>
        <div class="data">
          {{ item.article_view_count }} 浏览量 ·
          {{ item.article_like_count }} 点赞 ·
          {{ item.article_comment_count }} 评论 
          <div class="userpicture">
            <img :src="item.picture" v-if="item.picture != 'http://null'" />
            <img src="../../assets/头像.jpg" alt="" v-else />
          </div>
          <span class="username"> {{ item.username }}</span>
        </div>
      </li>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="browsingHistoryNum * 10"
        @current-change="currentPageCurrentPage"
        :current-page="browsingHistoryPage"
      >
      </el-pagination>
    </ul>
    <el-empty v-else :image-size="200"></el-empty>
  </div>
</template>

<script>
import { mixin } from "../../mixin";
export default {
  name: "BrowsingHistory",
  data() {
    return {
      browsingHistoryPage: 1, //浏览历史页码
      userBrowsingHistory: [],
    };
  },
  mixins: [mixin],
  methods: {
    //浏览历史切换页码
    currentPageCurrentPage(val) {
      this.userBrowsingHistory = [];
      this.browsingHistoryPage = val;
      this.browsingHistory();
    },
    //用户浏览历史
    browsingHistory() {
      this.$http({
        method: "post",
        url: "user/browseHistory",
        params: {
          pageNum: this.browsingHistoryPage, //页码（默认为1）
          pageSize: 10,
        },
      }).then(({ data }) => {
        if (data.flag) {
          console.log("浏览历史加载成功!");
          console.log("****", data);
          this.browsingHistoryNum = Math.ceil(data.data.total / 10);
          let article = data.data.article;
          let user = data.data.user;
          for (let i = 0; i < article.length; i++) {
            this.userBrowsingHistory.push({});
            this.userBrowsingHistory[i].article_title =
              article[i].article_title;
            this.userBrowsingHistory[i].article_view_count =
              article[i].article_view_count;
            this.userBrowsingHistory[i].article_like_count =
              article[i].article_like_count;
            this.userBrowsingHistory[i].article_comment_count =
              article[i].article_comment_count;
            this.userBrowsingHistory[i].article_id = article[i].article_id;
            this.userBrowsingHistory[i].uid = user[i].uid;
            this.userBrowsingHistory[i].username = user[i].username;
            this.userBrowsingHistory[i].picture = "http://" + user[i].picture;
            this.userBrowsingHistory[i].view_time = this.timeDetal(
              data.data.time[i]
            );
          }
        } else {
          console.log("浏览历史加载失败!");
        }
      });
    },
  },
  mounted() {
    this.browsingHistory();
  },
};
</script>

<style lang="less" scoped>
//文章列表渲染
.article {
  width: 100%;
  padding-bottom: 70px;
  li {
    cursor: pointer;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #e4e7ed;
    color: #4b4a4a;

    .title {
      width: 250px;
      font-size: 20px;
      letter-spacing: 2px;
      margin: 10px 0px;
      color: #302f2f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &:hover {
        color: orangered;
      }
    }
    .abstract {
      margin: 20px 0px;
      width: 100%;
      height: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .label {
      width: 30px;
      font-size: 12px;
      height: 15px;
      padding: 3px;
      text-align: center;
      background-color: rgba(227, 62, 51, 0.1);
      color: #e33e33;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
  .browsing-history {
    height: 85px;
    position: relative;
    .title {
      margin-bottom: 25px;
      font-size: 18px;
    }
    .data {
      font-size: 15px;
    }
    .browsing-time {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 13px;
    }

    .userpicture {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid #dad9d9;
      vertical-align: middle;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .username {
      font-weight: 700;
      letter-spacing: 2px;
    }
  }
}
.el-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
</style>